<!DOCTYPE html>
<html lang="zh">
<head>
    <th:block th:include="include :: header('功能扩展')" />
    <th:block th:include="include :: jasny-bootstrap-css" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <form class="form-horizontal m" id="form-GoodsInfo-edit"  method="post" enctype="multipart/form-data"  th:object="${goodsInfo}">
        <div class="ibox-content">
            <input name="id" id="id" th:field="*{id}" type="hidden">
            <input name="state" id="state" th:field="*{state}" type="hidden">
            <h4 class="form-header h5">商品信息</h4>
            <div class="form-group">
                <label class="col-sm-3 control-label">主标题：</label>
                <div class="col-sm-8">
                    <input name="mianTitle" th:field="*{mianTitle}" class="form-control" type="text" required />
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">副标题：</label>
                <div class="col-sm-8">
                    <input name="subTitle" th:field="*{subTitle}" class="form-control" type="text" required/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">售价：</label>
                <div class="col-sm-8">
                    <input name="price" th:field="*{price}" class="form-control" type="text" required/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">起购台数：</label>
                <div class="col-sm-8">
                    <input name="nums" th:field="*{nums}" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" class="form-control" type="number" minlength="1" maxlength="10" required/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">介绍详情：</label>
                <div class="col-sm-8">
                    <textarea name="details" th:field="*{details}" maxlength="300" class="form-control" rows="3"></textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">终端类型：</label>
                <div class="col-sm-8">
                    <select name="posType" class="form-control m-b" th:field="*{posType}">
                        <option value="4">电签</option>
                        <option value="0">传统</option>
                        <option value="5">GB传统</option>
                        <option value="6">GB电签</option>
                        <option value="7">GB电签二</option>

                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">划线价：</label>
                <div class="col-sm-8">
                    <input name="oldPrice" th:field="*{oldPrice}" class="form-control" type="text" required/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">成本价格：</label>
                <div class="col-sm-8">
                    <input name="costPrice" th:field="*{costPrice}" class="form-control" type="text" required/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">运费：</label>
                <div class="col-sm-8">
                    <input name="freightMoney" th:field="*{freightMoney}" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">库存：</label>
                <div class="col-sm-8">
                    <input name="stock" th:field="*{stock}" class="form-control" type="text" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" required/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">虚拟库存：</label>
                <div class="col-sm-8">
                    <input name="fictitiousStock" th:field="*{fictitiousStock}" class="form-control" type="text" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" required/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">库存预警：</label>
                <div class="col-sm-8">
                    <input name="stockEarlyWarning" th:field="*{stockEarlyWarning}" class="form-control" type="text" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" required/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">排序：</label>
                <div class="col-sm-8">
                    <input name="sorts" th:field="*{sorts}" class="form-control" type="text" required/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">备注：</label>
                <div class="col-sm-8">
                    <textarea name="remarks" th:field="*{remarks}" maxlength="300" class="form-control" rows="3"></textarea>
                </div>
            </div>
            <h4 class="form-header h5">图片信息</h4>
            <div class="form-group">
                <label  class="col-sm-3 control-label">首页图:</label>
                <br/>
                <div class="col-sm-8">
                    <div class="fileinput fileinput-new" data-provides="fileinput">
                        <div id="homeImgShow" class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
                        <div>
                            <span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span>
                                <span class="fileinput-exists">更改</span>
                                <input id="home" name="home" type="file" />
                            </span>
                            <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label  class="col-sm-3 control-label">详情图:</label>
                <br/>
                <div class="col-sm-8" id="detail" style="vertical-align:top"></div>
            </div>
            <div class="form-group">
                <label  class="col-sm-3 control-label">轮播图:</label>
                <br/>
                <div class="col-sm-8" id="lb" style="vertical-align:top"></div>
            </div>
            <div class="form-group">
                <label  class="col-sm-3 control-label is-required">活动图:</label>
                <br/>
                <div class="col-sm-8" id="hd" style="vertical-align:top">
<!--                    <div class="fileinput fileinput-new" data-provides="fileinput">-->
<!--                        <div  style='margin-left: 190px;' class='find-a'>-->
<!--                            <a href='javascript:void(0)' class='show_a'>-->
<!--                                <i  class='fa fa-plus'></i>-->
<!--                            </a>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div  class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;">-->
<!--                        <img class='sb' name="showDimg" />-->
<!--                    </div>-->
<!--                    <div>-->
<!--                        <span style='display: none' class="btn btn-white btn-file">-->
<!--                            <span class="fileinput-new">选择图片</span><span class=\"fileinput-exists\">更改</span>-->
<!--                            <input  name="hdImg" type="file" />-->
<!--                        </span>-->
<!--                        <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a><br/><br/>-->
<!--                        <a href="javascript:void(0);" style='margin-left: 115px;margin-top: -60px;' class="btn btn-white b" >删除图片</a><br/><br/>-->
<!--                    </div>-->
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: jasny-bootstrap-js" />
<th:block th:include="include :: utils-js" />
<script th:inline="javascript">
    var prefix = ctx + "GoodsInfo/GoodsInfo";

    /**
     * 获取图片的地址信息
     */
   var getImg = function () {
        var id = $("#id").val();
        $.post(prefix + "/getImg",{"id":id},function (result) {
            var home = ""; //首页
            var details = ""; //详情
            var lb = ""; //轮播
            var hd = ""; //活动

            result.rows.forEach(function(value, index){
                //首页
                var imgId = value.id;
                if (value.type == '1'){
                    home ='<img name="showHome" src =' + value.url + '>';
                } else if (value.type == '3'){ //详情图
                    details  += " <div class=\"fileinput fileinput-new\" data-provides=\"fileinput\">" +
                        "               <div style='margin-left: 190px;' class='find-a'>" +
                        "                   <a  style='display: none'  href='javascript:void(0)'  class='show_a' ><i  class='fa fa-plus'></i><a>" +
                        "               </div>"+
                        "               <div class=\"fileinput-preview thumbnail\" data-trigger=\"fileinput\" style=\"width: 200px; height: 150px;\">" +
                        "                   <img class='sb' name='showDimg' src="+ value.url+">" +
                        "               </div>" +
                        "               <div>\n" +
                        "                   <span class=\"btn btn-white btn-file\"><span class=\"fileinput-new\">选择图片</span><span class=\"fileinput-exists\">更改</span><input  name='"+imgId+"' type=\"file\"/></span>\n" +
                        "                   <a href=\"#\" class=\"btn btn-white fileinput-exists\" data-dismiss=\"fileinput\">清除</a><br><br>\n" +
                        "                   <a href=\"javascript:void(0);\" style='margin-left: 110px;margin-top: -90px;' class=\"btn btn-white b\" >删除图片</a><br><br>\n" +
                        "               </div>\n" +
                        "           </div>";
                } else if (value.type == '2'){//轮播
                    lb += " <div class=\"fileinput fileinput-new\" data-provides=\"fileinput\"> " +
                        "       <div style='margin-left: 190px;' class='find-a'>" +
                        "           <a  style='display: none' href='javascript:void(0)' class='show_a' ><i  class='fa fa-plus'></i><a>" +
                        "       </div>"+
                        "       <div  class=\"fileinput-preview thumbnail\" data-trigger=\"fileinput\" style=\"width: 200px; height: 150px;\">" +
                        "           <img class='sb' name='showLb' src="+ value.url+" />" +
                        "       </div>" +
                        "       <div>" +
                        "           <span class=\"btn btn-white btn-file\"><span class=\"fileinput-new\">选择图片</span><span class=\"fileinput-exists\">更改</span><input  name='"+imgId+"' type=\"file\"/></span>\n" +
                        "           <a href=\"#\" class=\"btn btn-white fileinput-exists\" data-dismiss=\"fileinput\">清除</a><br><br>\n" +
                        "           <a href=\"javascript:void(0);\" style='margin-left: 110px;margin-top: -90px;' class=\"btn btn-white b\" >删除图片</a><br><br>\n" +
                        "       </div>\n" +
                        "   </div>";
                } else if (value.type == '11'){//活动
                    // if (hdIndex != '0'){
                    hd += " <div class=\"fileinput fileinput-new\" data-provides=\"fileinput\">\n" +
                        "<div style='margin-left: 190px;' class='find-a'><a  style='display: none' href='javascript:void(0)' class='show_a' ><i  class='fa fa-plus'></i><a></div>"+
                        "                        <div  class=\"fileinput-preview thumbnail\" data-trigger=\"fileinput\" style=\"width: 200px; height: 150px;\"><img class='sb' name='hdUrl' src="+ value.url+"></div>\n" +
                        "                        <div>\n" +
                        "                            <span class=\"btn btn-white btn-file\"><span class=\"fileinput-new\">选择图片</span><span class=\"fileinput-exists\">更改</span><input  name='"+imgId+"' type=\"file\"/></span>\n" +
                        "                            <a href=\"#\" class=\"btn btn-white fileinput-exists\" data-dismiss=\"fileinput\">清除</a><br><br>\n" +
                        "                            <a href=\"javascript:void(0);\" style='margin-left: 110px;margin-top: -90px;' class=\"btn btn-white b\" >删除图片</a><br><br>\n" +
                        "                        </div>\n" +
                        "                    </div>";
                    // } else {
                    //     $("#hd").parent().parent().find("img").attr("src",value.url);
                    // }
                    // hdIndex++;
                }
            });
            $("#homeImgShow").append(home); //主页图
            $("#detail").append(details); //详情图
            $("#lb").append(lb); //轮播图
            $("#hd").append(hd); //活动图
            // over();
            $(".b").show(); //回显的图片显示删除操作
            bindClick(); //绑定删除事件
            showClick(); //绑定图标删除事件
            changeClass("lb","fileinput-new");
            changeClass("detail","fileinput-new");
            changeClass("hd","fileinput-new");

        })
    }();


   // function over() {
   //     $(".thumbnail").mouseover(
   //         function(){
   //             $(this).click(function () {
   //                 return false;
   //             });
   //         }
   //     );
   // }

   /**
    * 绑定一个删除操作
    * */
   function bindClick() {
       $("body").on("click",".b",function () {
           var idName = $(this).parent().parent().parent().attr("id");
           var name = '首页图';
           if (idName == "detail") {
               name = '详情图';
           } else if (idName == "lb"){
               name = '轮播图';
           } else if(idName == "hd"){
               name = '活动图';
           }
           var number = $("#"+idName).children().length;
           if (number == 1){
               $.modal.alertError("商品至少保留一张"+ name);
               return;
           }
           //动态获取父级的父级
           var url = $(this).parent().parent().find("img").attr("src");

           //默认class
           var content = 'fileinput-new';
           if (typeof(url) == "undefined" || url.length == 0){
               $(this).parents("."+content).remove();
               changeClass(idName,content)
               return;
           }
           //判断图片是本地图片还是回显图片
           //只有回显图片可删除
           if (typeof(url) != "undefined" && url.indexOf("http") == '-1'){
               //删除本地图片后 class会恢复成默认
               $(this).parents(".fileinput-exists").remove();
               changeClass(idName,content)
               return;
           }
           //标识结果
           var results = true;
           $.ajaxSettings.async = false;
           $.post(prefix + "/delImg",{"url":url,"goodsId":$("#id").val(),"type":idName},function (result) {
               if (result.code == '0') {
                   $.modal.msgSuccess(result.msg);
               }else {
                   $.modal.alertError(result.msg);
                   results = false;
               }
           });
           if (results){
               $(this).parents(".fileinput-new").remove();
               changeClass(idName,content)
           }
       });

   }

    /**
     * 新增详情图节点
     */
    function detailInsert() {
        var html  = " <div class=\"fileinput fileinput-new\" data-provides=\"fileinput\">\n" +
            "<div  style='margin-left: 190px;' class='find-a'><a href='javascript:void(0)' class='show_a'><i  class='fa fa-plus'></i><a></div>"+
            "                        <div  class=\"fileinput-preview thumbnail\" data-trigger=\"fileinput\" style=\"width: 200px; height: 150px;\"></div>\n" +
            "                        <div>\n" +
            "                            <span class=\"btn btn-white btn-file\"><span class=\"fileinput-new\">选择图片</span><span class=\"fileinput-exists\">更改</span><input  name=\"detailImg\" type=\"file\"></span>\n" +
            "                            <a href=\"#\" class=\"btn btn-white fileinput-exists\" data-dismiss=\"fileinput\">清除</a><br><br>\n" +
            "                            <a href=\"javascript:void(0);\" style='margin-left: 110px;margin-top: -90px;' class=\"btn btn-white b\" >删除图片</a><br><br>\n" +
            "                        </div>\n" +
            "                    </div>";
        $("#detail").append(html);
    }

    /**
     * 新增轮播节点
     */
    function lbInsert() {
        var html = " <div class=\"fileinput fileinput-new\" data-provides=\"fileinput\">\n" +
            "<div  style='margin-left: 190px;' class='find-a'><a href='javascript:void(0)' class='show_a'><i  class='fa fa-plus'></i><a></div>"+
            "                        <div  class=\"fileinput-preview thumbnail\" data-trigger=\"fileinput\" style=\"width: 200px; height: 150px;\"></div>\n" +
            "                        <div>\n" +
            "                            <span class=\"btn btn-white btn-file\"><span class=\"fileinput-new\">选择图片</span><span class=\"fileinput-exists\">更改</span><input  name=\"lbImg\" type=\"file\"></span>\n" +
            "                            <a href=\"#\" class=\"btn btn-white fileinput-exists\" data-dismiss=\"fileinput\">清除</a><br><br>\n" +
            "                            <a href=\"javascript:void(0);\" style='margin-left: 110px;margin-top: -90px;' class=\"btn btn-white b\" >删除图片</a><br><br>\n" +
            "                        </div>\n" +
            "                    </div>";
        $("#lb").append(html);
    }

    /**
     * 新增活动节点
     */
    function hdInsert() {
        var html = " <div class=\"fileinput fileinput-new\" data-provides=\"fileinput\">\n" +
            "<div  style='margin-left: 190px;' class='find-a'><a href='javascript:void(0)' class='show_a'><i  class='fa fa-plus'></i><a></div>"+
            "                        <div  class=\"fileinput-preview thumbnail\" data-trigger=\"fileinput\" style=\"width: 200px; height: 150px;\"></div>\n" +
            "                        <div>\n" +
            "                            <span class=\"btn btn-white btn-file\"><span class=\"fileinput-new\">选择图片</span><span class=\"fileinput-exists\">更改</span><input  name=\"hdImg\" type=\"file\"></span>\n" +
            "                            <a href=\"#\" class=\"btn btn-white fileinput-exists\" data-dismiss=\"fileinput\">清除</a><br><br>\n" +
            "                            <a href=\"javascript:void(0);\" style='margin-left: 110px;margin-top: -90px;' class=\"btn btn-white b\" >删除图片</a><br><br>\n" +
            "                        </div>\n" +
            "                    </div>";
        $("#hd").append(html);
    }

    /**
     * 绑定点击新增图片
     */
    function showClick() {
        $("body").on("click",".show_a",function () {
            var idName = $(this).parent().parent().parent().attr("id");
            if (idName == 'detail'){
                detailInsert()
            }
            if (idName == 'lb'){
                lbInsert()
            }
            if (idName == 'hd'){
                hdInsert()
            }
            var tempThis = this;
            var temp = $(".find-a").find("a");
            temp.each(function(){
                if(tempThis != this) {
                    $(tempThis).hide();
                } else {
                    $(this).show();
                }
            });

        });
    }

    /**
     * 删除新增变动class
     */
    function changeClass(idName,content) {
        //获取所有lb下的a标签
        var list = '';
        if (idName == 'detail'){
            list = $("#detail ." + content +" .find-a").find("a");
        }
        if (idName == 'lb'){
            list = $("#lb ." + content +" .find-a").find("a");
        }
        if (idName == 'hd'){
            list = $("#hd ." + content +" .find-a").find("a");
        }

        var array = new Array();
        //获取所有的a标签的下标
        list.each(function (value) {
            array.push(value);
        });
        //下标和2整除的为新增图片标识
        //每次赋值新的，
        var index = 0;
        for (var i = 0; i < array.length; i++) {
            if (i % 2 == 0){
                index = i;
            }
        }
        //最后改变的是删除的当前标签的上一个节点
        if (idName == 'detail'){
            $("#detail ." + content +" .find-a").find("a").eq(index).css("display","block");
        }
        if (idName == 'lb'){
            $("#lb ." + content +" .find-a").find("a").eq(index).css("display","block");
        }
        if (idName == 'hd'){
            $("#hd ." + content +" .find-a").find("a").eq(index).css("display","block");
        }
    }



    function submitHandler() {
        if ($.validate.form()) {
            if (!$.vali.money($("input[name='price']").val())){
                $.modal.alertError("请输入正确的售价");
                return;
            }
            if (!$.vali.money($("input[name='oldPrice']").val())){
                $.modal.alertError("请输入正确的划线价");
                return;
            }
            if (!$.vali.money($("input[name='costPrice']").val())){
                $.modal.alertError("请输入正确的成本价");
                return;
            }
           /* var msg = isCover();
            if (msg != 0){
                $.modal.alertError(msg);
                return;
            }*/

            var formData = new FormData($("#form-GoodsInfo-edit")[0]);
            $.ajax({
                url: prefix + "/adds",
                data: formData,
                type: "post",
                dataType: "json",
                cache: false,//上传文件无需缓存
                processData: false,//用于对data参数进行序列化处理 这里必须false
                contentType: false, //必须
                beforeSend: function () {
                    $.modal.loading("正在处理中，请稍后...");
                },
                success: function (result) {
                    if (result.code == '0') {
                        $.operate.successCallback(result);
                    }else {
                        $.modal.alertError(result.msg);
                    }
                    $.modal.closeLoading();
                },
            })
        }
    }


</script>
</body>
</html>
